<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>websocket</title>
    <!--加入下面这行代码避免出现中文乱码，原理解释如下-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="http://localhost:8081/static/css/common.css">
    <script type="text/javascript"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <style type="text/css">
        #message{
            margin: auto;
            text-align: center;
            width: 700px;

        }
        .setLi{
            background-color: #ecafaf;
            opacity: 0.4;
            list-style: none;
            line-height: 60px;
            height: 60px;
        }
        #onLineUser{
            margin-top: 25px;
            padding: 0px;
            color: #2230d8;
            text-align: center;
            font-size: large;
        }
        .divFlow{
            overflow-x: auto;
            overflow-y: auto;
            height: 610px;
            width:750px;
            border:1px solid black;
        }
    </style>
</head>

<body>
<div style="margin: auto;text-align: center">
    <h1>Welcome to websocket</h1>
</div>
<br/>
<div class="container">
    <div class="row">
        <!-- 左边 -->
        <div class="setGrey col-sm-3" style="height:700px">
            <ul id="onLineUser">
                <li class="setLi" id="all">--所有--</li><hr/>
            </ul>
        </div>

        <!-- 右边 -->
        <div class="col-sm-8">
            <input id="text" type="text" />
            <button onclick="send()">发送消息</button>
            <button onclick="closeWebSocket()">关闭连接</button>
            <hr/>
            <div id="userInfo"></div>
            <div class="divFlow" style="border: 1px solid black">
                <table id="message"></table>
            </div>
            <input type="text" id="userTo" th:value="${userTo}" hidden="hidden"/>
        </div>
        <div class="col-sm-1"></div>
    </div>
</div>
</body>
<script th:src="@{/static/js/index.js}" src="/static/js/chatPage.js"></script>
</html>
